<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"
    />
    <link rel="stylesheet" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <script src="./js/swiper.min.js"></script>
    <script src="./js/index.js"></script>
    <title>京东</title>
    <style>
      .swiper-container {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .swiper-pagination-bullet-active {
        background-color: #fff !important;
      }
    </style>
  </head>
  <body>
    <header class="app">
      <ul>
        <li>
          <img src="./img/close.png" alt="" />
        </li>
        <li><img src="./img/logo.png" alt="" /></li>
        <li>打开京东app,购物更轻松</li>
        <li>立即打开</li>
      </ul>
    </header>
    <!-- 搜索 -->
    <div class="search-wrap">
      <div class="search-btn"></div>
      <div class="search">
        <div class="jd-icon"></div>
        <div class="sou"></div>
      </div>
      <div class="serach-login">登录</div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 轮播图 -->
      <div class="slider">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./upload/banner.dpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./upload/banner1.dpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./upload/banner2.dpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./upload/banner3.dpg" alt="" />
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
      </div>

      <!-- 品牌日 -->
      <div class="brand">
        <div>
          <a href="#"><img src="./upload/pic11.dpg" alt="" /></a>
        </div>
        <div>
          <a href="#"><img src="./upload/pic22.dpg" alt="" /></a>
        </div>
        <div>
          <a href="#"><img src="./upload/pic33.dpg" alt="" /></a>
        </div>
      </div>

      <!-- 导航 -->
      <div class="nav clearfix">
        <a href="#">
          <img src="./upload/nav1.webp" alt="" />
          <p>京东超市</p>
        </a>
        <a href="#">
          <img src="./upload/nav2.webp" alt="" />
          <p>数码超市</p>
        </a>
        <a href="#">
          <img src="./upload/nav3.webp" alt="" />
          <p>京东服饰</p>
        </a>
        <a href="#">
          <img src="./upload/nav4.webp" alt="" />
          <p>京东生鲜</p>
        </a>
        <a href="#">
          <img src="./upload/nav5.webp" alt="" />
          <p>京东到家</p>
        </a>
        <a href="#">
          <img src="./upload/nav6.webp" alt="" />
          <p>充值缴费</p>
        </a>
        <a href="#">
          <img src="./upload/nav7.webp" alt="" />
          <p>9.9元拼</p>
        </a>
        <a href="#">
          <img src="./upload/nav8.webp" alt="" />
          <p>领券</p>
        </a>
        <a href="#">
          <img src="./upload/nav9.webp" alt="" />
          <p>借钱</p>
        </a>
        <a href="#">
          <img src="./upload/nav10.webp" alt="" />
          <p>PLUS会员</p>
        </a>
      </div>

      <!-- 京东快报 -->

      <!-- 新闻快报 -->
      <div class="news">
        <a href="#"><img src="./upload/new1.dpg" alt="" /></a>
        <a href="#"><img src="./upload/new2.dpg" alt="" /></a>
        <a href="#"><img src="./upload/new3.dpg" alt="" /></a>
      </div>
    </div>
  </body>
</html>
